<template>
  <div class="content">
    <div class="header_box">
      <div class="header_left">产品列表</div>
      <div class="header_right">
        <el-form :inline="true" :model="searchForm" class="form_box">
          <!-- <el-form-item>
            <el-input
              v-model="searchForm.productCode"
              placeholder="产品编码"
              style="width: 200px"
              clearable
            />
          </el-form-item> -->
          <el-form-item>
            <el-input
              v-model="searchForm.name"
              placeholder="产品名称"
              style="width: 200px"
              clearable
            />
          </el-form-item>
          <!-- <el-form-item>
            <el-input
              v-model="searchForm.category"
              placeholder="类别"
              style="width: 200px"
              clearable
            />
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="init">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toInfo">新增产品</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ background: '#fafbfc', color: '#bbbcc3' }"
      max-height="500"
    >
      <el-table-column type="index" :index="indexMethod" />
      <el-table-column prop="image" label="产品主图">
        <template #default="{ row }">
          <el-image
            style="width: 50px; height: 50px"
            :src="`${baseUrl}product/getImg?id=${row.id}`"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            preview-teleported
            :fit="contain"
            hide-on-click-modal
            :preview-src-list="[`${baseUrl}product/getImg?id=${row.id}`]"
          />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="产品名称" />
      <!-- <el-table-column prop="category" label="类别" /> -->
      <!-- <el-table-column prop="description" label="描述" show-overflow-tooltip /> -->
      <el-table-column prop="price" label="默认价格" />
      <!-- <el-table-column prop="dq" label="地区" /> -->
      <el-table-column prop="gj" label="国家" />
      <!-- <el-table-column prop="url" label="网址" /> -->
      <el-table-column prop="zw" label="指纹策略" />
      <el-table-column prop="zw" label="指定节点或节点组" />
      <el-table-column prop="pay" label="支付流程" />
      <!-- 这个只有 手动与自动 -->
      <el-table-column prop="stockQuantity" label="库存" />
      <el-table-column prop="isActive" label="是否下架">
        <template #default="{ row }">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="row.isActive"
            @change="change(row)"
          />
        </template>
      </el-table-column>
      <!-- <el-table-column prop="createdAt" label="创建时间" /> -->
      <!-- <el-table-column prop="updatedAt" label="更新时间" /> -->
      <el-table-column label="操作">
        <template #default="{ row }">
          <div class="icon_content">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="编辑"
              placement="top-start"
            >
              <div class="icon_box">
                <el-icon @click="edit(row)" size="20" color="#71778d"
                  ><EditPen
                /></el-icon>
              </div>
            </el-tooltip>
            <el-tooltip
              class="box-item"
              effect="dark"
              content="删除"
              placement="top-start"
            >
              <div class="icon_box_d">
                <el-icon @click="remove(row)" size="20" color="#71778d"
                  ><Remove
                /></el-icon>
              </div>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="page_box">
      <el-pagination
        v-model:current-page="searchForm.pageNo"
        v-model:page-size="searchForm.pageSize"
        :page-sizes="[10, 50, 100, 150]"
        :small="small"
        :disabled="false"
        :background="true"
        layout="sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup>
import { defineOptions, ref, onBeforeMount } from "vue";
import * as productApi from "../../api/project1/product/product.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
defineOptions({ name: "ProductList" });

let tableData = ref([
  {
    id: 1,
    image: "https://via.placeholder.com/50",
    name: "产品 A",
    category: "电子产品",
    description: "这是一款非常棒的电子产品，性能优越，性价比高。",
    price: "￥1999.00",
    originalPrice: "￥2499.00",
    url: "https://example.com/product-a",
    zw: "策略 A",
    pay: "手动",
    stockQuantity: 100,
    isActive: "是",
    dq: "美国",
  },
  {
    id: 2,
    image: "https://via.placeholder.com/50",
    name: "产品 B",
    category: "家居用品",
    description: "这是一款高质量的家居用品，舒适美观，适合各种家庭使用。",
    price: "￥299.00",
    originalPrice: "￥399.00",
    url: "https://example.com/product-b",
    zw: "策略 B",
    pay: "自动",
    stockQuantity: 50,
    isActive: "否",
    dq: "新加坡",
  },
]);

let searchForm = ref({
  id: null, // 商品ID，Integer 类型
  productCode: "", // 商品编码，String 类型
  name: "", // 商品名称，不能为空，String 类型
  category: "", // 商品类别，String 类型
  description: "", // 商品描述，String 类型
  price: 0.0, // 商品价格，BigDecimal 类型，保留两位小数
  originalPrice: 0.0, // 商品折前价格，BigDecimal 类型，保留两位小数
  stockQuantity: 0, // 商品库存数量，默认0，Integer 类型
  createdAt: null, // 商品创建时间，Date 类型
  updatedAt: null, // 商品信息最后更新时间，Date 类型
  isActive: 1, // 商品状态，1表示上架，0表示下架，默认1，Integer 类型
  tenantId: null, // 租户ID，Long 类型
  image: "", // 图片，String 类型
  pageNo: 1,
  pageSize: 10,
});

let total = ref(0);

const baseUrl = ref("/api/");

const router = new useRouter();

const init = async () => {
  // const res = await productApi.page(searchForm.value);
  // const { records } = res;
  // tableData.value = records;
  // total.value = res.total;
};
const change = async (e) => {
  // const res = await productApi.saveOrUpdate(e);
  // const { code, msg } = res;
  // if (code !== "200") {
  //   ElMessage.error(msg);
  //   return;
  // }
  // ElMessage.success("操作成功");
};

const toInfo = () => {
  router.push({
    name: "productInfo",
  });
};

const edit = (row) => {
  // 打开编辑对话框，并在对话框中使用下拉框选择支付流程
  // 例如，使用一个模态框组件来编辑产品信息
  // 在模态框中使用 <el-select> 组件来选择支付流程
};

onBeforeMount(() => {
  // init();
});
</script>
<style lang="less" scoped>
.header_left {
  border-radius: 15px 0px 0px 0px;
  font-weight: 800;
}
.header_right {
  background-color: #ffffff;
  justify-content: flex-end;
  border-radius: 0px 15px 0px 0px;
}
:deep(.form_box) {
  width: 80%;
  height: 40%;
  margin: 0px;
  display: flex;
  justify-content: flex-end;
}
</style>